import React, { useState } from 'react'
import './index.css'

export default function Item({ todo, done, id, todoList, setTodoList }) {
  // console.log(todo, 1, done, 2, id, 3, todoList, 4, setTodoList);
  //两个函数实现的功能差不多,可以合并(函数柯里化)

  const [isActive, setIsActive] = useState(false)
  const mouseHandle = (bool) => {
    return () => {
      setIsActive(bool)
    }
  }

  const checkChangeHandle = (e) => {
    //5.不能把以前的todoList改了之后,再setTodoList(todoList)这个todoList的地址没有变,react是不会重新渲染的,只能生成一个新的数组再设置上去才有作用
    //6.数组的地址变了,但是数组的每一项是对象,对象的地址不变
    // console.log(id);
    // console.log(e.target.checked);
    // console.log(todoList);
    //1.当前选择框的checked是false,需要修改当前选中框的checked,但是checked受state控制
    //2.当点击时,e.target.checked期望的值希望是true,所以打印一直是true,需要修改state,修改的方法
    //2.1.把这个值传给App,在App中修改,2.把todoList和settodoList传下来,在这个位置修改todoList
    //3.当点击的这个input的id和todolist的元素的id对的上的时候把这个对象的done改成e.target.checked(遍历todoList,如果里面有一个元素的id对的上,就修改)
    //4.返回一个新数组,把新数组给setTodoList
    //7.这种方式是修改了以前的item,希望不修改item{state的item},返回新的item
    const newTodo = todoList.map((item) => {
      // if (item.id === id) {
      //   item.done = e.target.checked
      // }
      //
      if(item.id === id){
        //类式组件中不是修改原来的state,而是覆盖原来的state
        //{...item}浅拷贝,就不是原来的那个item了
        return {...item,done:e.target.checked}
      }
      return item
    })
    setTodoList(newTodo)

  }

  //


  //给button绑定点击事件,点击删除能删除这个对象
  const deleteHandle = () => {
    console.log(id);
    //删除数组中的某个元素,用过滤
    // const newTodo = todoList.filter((item) => {
    //filter的判断是每个元素进来,return后面的结果如果是true,这个item就能出去,如果是false,这个item就出不去
    // return item.id !== id
    //  if(item.id !== id){
    //   return item
    //  }

    // })

    //简写
    const newTodo = todoList.filter(item => { return item.id !== id })
    // console.log(newTodo);

    setTodoList(newTodo)


  }

  return (
    <li
      onMouseEnter={mouseHandle(true)}
      onMouseLeave={mouseHandle(false)}
      className={isActive ? 'active' : ''}>
      <label>
        <input type="checkbox" checked={done} onChange={checkChangeHandle} />
        <span>{todo}</span>
      </label>
      <button className="btn btn-danger" onClick={deleteHandle} style={{ display: isActive ? 'block' : 'none' }}>删除</button>
    </li>
  )
}
